<template>
    <div id="app">
        <router-view v-if="isRouterAlive" />
        <section class="loading" v-if="loading">
            <div
                v-loading="true"
                element-loading-background="rgba(0, 0, 0, 0.8)"
            ></div>
            <p>加载中...</p>
        </section>
        <section class="backtop ">
            <img @click="backtop" src="./assets/n-8.png" alt="" />
        </section>
    </div>
</template>

<script>
export default {
    name: "App",
    provide() {
        return {
            reload: this.reload,
        };
    },
    data() {
        return {
            isRouterAlive: true,
        };
    },
    created() {
        console.log("程序员刘天帝调试专用");
        // this.backtop();
    },
    methods: {
        reload() {
            this.isRouterAlive = false;
            this.$nextTick(function() {
                this.isRouterAlive = true;
            });
        },
        backtop() {
            var timer = setInterval(function() {
                let osTop =
                    document.documentElement.scrollTop ||
                    document.body.scrollTop;
                let ispeed = Math.floor(-osTop / 5);
                document.documentElement.scrollTop = document.body.scrollTop =
                    osTop + ispeed;
                this.isTop = true;
                if (osTop === 0) {
                    clearInterval(timer);
                }
            }, 10);
        },
    },
    computed: {
        loading() {
            return this.$store.getters.loading;
        },
    },
};
</script>

<style>
.backtop {
    position: fixed;
    z-index: 55;
    right: 50px;
    bottom: 50px;
}

img {
    object-fit: cover;
    display: block;
    margin: 0 auto;
}
.loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 55;
    background-color: rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}
.loading p {
    color: #409eff;
    margin-top: 100px;
    font-size: 18px;
    letter-spacing: 2px;
}
.hear-3 .router-link-exact-active {
    background-color: rgb(40, 22, 85);
}
</style>
